import React, { forwardRef, useImperativeHandle, useState } from 'react'
import { Form, Modal } from 'antd'
import styles from './index.less'

const ViewModal = (props) => {
  const [modalVisible, setModalVisible] = useState(false)
  const [desc, setDesc] = useState({})
  const [form] = Form.useForm()

  const toggleModal = (data = {}) => {
    if (!modalVisible) {
      setTimeout(() => {
        setDesc(data)
      })
    }
    setModalVisible(!modalVisible)
  }

  useImperativeHandle(props.refInstance, () => ({
    toggleModal,
  }))

  return (
    <Modal
      title="授权审批"
      visible={modalVisible}
      maskClosable={false}
      // forceRender={false}
      width={520}
      footer={null}
      onCancel={toggleModal}
    >
      <Form
        form={form}
        className={styles.form}
        name="basic"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        initialValues={{ remember: true }}
        colon={false}
        autoComplete="off"
      >
        <Form.Item
          label="API名称"
          name="ApiName"
        >
          <div className={styles.cont}>{desc?.apiName || '-'}</div>
        </Form.Item>
        <Form.Item
          label="申请人"
          name="ApiName"
        >
          <div className={styles.cont}>{desc?.userName || '-'}</div>
        </Form.Item>
        <Form.Item
          label="审批说明"
          name="approveReason"
        >
          <div className={styles.cont}>{desc?.approveReason || '-'}</div>
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default forwardRef((props, ref) => <ViewModal {...props} refInstance={ref} />)
